<template>
  <div class="topics-container">
    <div class="topic" v-for="topic in topic_data" :key="'post' + topic.postNo">
      <div class="topic-title" @click="toTopicDetail(topic.postNo)">
        {{ topic.postTitle }}
      </div>
      <div class="topic-content">
        <div class="topic-content-cover" v-if="getPicUrl(topic.postContent)">
          <div
            class="topic-content-cover-inner"
            v-if="getPicUrl(topic.postContent)"
            @click="toTopicDetail(topic.postNo)"
          >
            <img :src="getPicUrl(topic.postContent)" />
          </div>
        </div>
        <div
          class="topic-content-inner"
          v-html="handleHTML(topic.postContent)"
          @click="toTopicDetail(topic.postNo)"
        ></div>
      </div>
      <div class="topic-bottom" v-if="operationBarVis">
        <div class="fave-container" @click="handleLike(topic)">
          <favebutton :status="topic.likeStatus"></favebutton>
          <span class="fave-times">{{ topic.postLikeNumber }}</span>
        </div>
        <div class="fave-container" @click="handleCollect(topic)">
          <collectionbutton :status="topic.collectStatus"></collectionbutton>
          <span class="fave-times">{{ topic.postCollectionNumber }}</span>
        </div>
        <div class="fave-container" @click="openReport(topic)">
          <reportbutton :status="topic.reportStatus"></reportbutton>
        </div>
      </div>
    </div>
    <cm-modal
      v-model="visibility"
      @bodyClose="bodyClose()"
      :bodyClosable="true"
      :width="450"
      :height="300"
    >
      <div class="report-info-container">
        <div class="head">
          <p>填写举报原因</p>
        </div>
        <div class="body">
          <div>
            <tag v-for="tag in someReasons" :key="tag.content" @handleChange="handleChange(tag)">{{tag.content}}</tag>
          </div>
          <textarea v-model="reportReason" v-text="reportReason"> </textarea>
        </div>
        <div class="foot">
          <button @click="bodyClose()">取消</button>
          <button @click="handleReport()">确定</button>
        </div>
      </div>
    </cm-modal>
  </div>
</template>

<script>
import Favebutton from "./favebutton.vue";
import { clearHTML } from "../../utils/utils";
import { mapGetters } from "vuex";
// eslint-disable-next-line no-unused-vars
import { handleTopics, cutTopicContent, getLocalTime } from "../../utils/utils";
import Collectionbutton from "./collectionbutton.vue";
import Reportbutton from "./littlebutton/reportbutton.vue";
import CmModal from "./pop/cmModal.vue";
import Tag from './tag/tag.vue';

export default {
  data() {
    return {
      likeId: -1,
      topic_data: "",
      visibility:false,//举报弹窗可见性
      someReasons:[
        {
          content:'涉嫌辱骂',
          checked:false
        },
        {
          content:'色情低俗',
          checked:false
        },
        {
          content:'暴力血腥',
          checked:false
        },
        {
          content:'虚假信息',
          checked:false
        },
        {
          content:'不良言论',
          checked:false
        }
      ],
      reportReason:'',
      report:''//等待处理的topic
    };
  },

  props: ["topicData", "collectButtonVis", "operationBarVis"],

  components: { Favebutton, Collectionbutton, Reportbutton, CmModal, Tag },

  computed: {
    ...mapGetters(["user"]),
  },

  methods: {
    handleHTML(data) {
      let status = data.search("<headpicsplit>");
      if (status != -1) {
        let result = data.split("<headpicsplit>")[1];
        return cutTopicContent(clearHTML(result));
      } else return cutTopicContent(clearHTML(data));
    },
    getPicUrl(data) {
      let status1 = data.search("<headpicsplit>");
      let status2 = data.search("<img>");
      if (status1 != -1) {
        let result = data.split("<headpicsplit>")[0];
        return result;
      } else {
        if (status2 != -1) {
          let temp = data.split("src=")[1];
          let result = temp.split(">")[0];
          return result;
        }
      }
    },
    toTopicDetail(data) {
      this.$router.push({ path: "/browsetopic", query: { postNo: data } });
    },
    handleLike(topic) {
      let index = this.topic_data.indexOf(topic);
      let newtopic = JSON.parse(JSON.stringify(topic));
      newtopic.likeStatus = !newtopic.likeStatus;
      if (newtopic.likeStatus == true)
        newtopic.postLikeNumber = newtopic.postLikeNumber + 1;
      else newtopic.postLikeNumber = newtopic.postLikeNumber - 1;
      this.$set(this.topic_data, index, newtopic);
      const that = this;
      setTimeout(function () {
        that.$getApi.setLike(that.user.userNo, topic.postNo, 1).then((res) => {
          console.log(res);
        });
      }, 300);
    },
    handleCollect(topic) {
      let index = this.topic_data.indexOf(topic);
      let newtopic = JSON.parse(JSON.stringify(topic));
      newtopic.collectStatus = !newtopic.collectStatus;
      if (newtopic.collectStatus == true)
        newtopic.postCollectionNumber = newtopic.postCollectionNumber + 1;
      else newtopic.postCollectionNumber = newtopic.postCollectionNumber - 1;
      this.$set(this.topic_data, index, newtopic);
      const that = this;
      setTimeout(function () {
        that.$getApi
          .setCollection(that.user.userNo, topic.postNo, 1)
          .then((res) => {
            console.log(res);
          });
      }, 300);
    },
    handleReport() {
      console.log('handleReport',this.report)
      if (this.report.reportStatus == undefined) {
        let index = this.topic_data.indexOf(this.report);
        let newtopic = JSON.parse(JSON.stringify(this.report));
        newtopic.reportStatus = !newtopic.reportStatus;
        this.$set(this.topic_data, index, newtopic);
        const that = this;
        setTimeout(function () {
          that.$getApi
            .setReport(that.user.userNo, that.report.postNo, 1, getLocalTime(),that.reportReason)
            .then((res) => {
              console.log(res);
              that.visibility = false
              that.reportReason = ''
            });
        }, 300);
      }
    },
    bodyClose(){
      this.visibility = false
    },
    openReport(topic){
      this.report = topic
      this.visibility = true
    },

    cutTopicContent: cutTopicContent, //裁剪帖子内容防溢出

    handleChange(tag){
      this.reportReason = this.reportReason + " " + tag.content
    },

  },
  created() {},
  watch: {
    topicData(newval) {
      this.topic_data = newval;
    },
  },
};
</script>
<style>
img {
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
.topics-container {
  position: relative;
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
  animation: topicshow 0.5s ease;
  z-index: 200000;
}
.topic {
  display: block;
  width: 654px;
  background-color: rgb(255, 255, 255);
  border-top: 1px rgb(240, 240, 240) solid;
  padding: 20px;
}
.topic-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  cursor: pointer;
}
.topic-title div {
  background-color: rgb(105, 121, 251);
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  color: white;
  padding: 1px 6px;
}
.topic-content {
  display: block;
  min-width: 630px;
  overflow: hidden;
  margin: 10px 0px;
}
.topic-content-cover {
  width: 190px;
  height: 105px;
  float: left;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 18px;
}
.topic-content-cover-inner {
  width: 190px;
  height: 105px;
  cursor: pointer;
}
.topic-content-cover-inner img {
  width: 100%;
  height: 100%;
}
.topic-content-inner {
  position: relative;
  font-size: 15px;
  line-height: 1.2;
  max-height: 88px;
  overflow: hidden;
  overflow-wrap: break-word;
  cursor: pointer;
}
.topics-container .topic-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.67;
  font-size: 14px;
  width: 100%;
  margin-left: 490px;
}
.fave-container {
  width: 80px;
  height: 30px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: -20px;
}
.fave-times {
  font-size: 14px;
  color: rgb(117, 117, 117);
  height: 30px;
  width: 40px;
  line-height: 30px;
  margin-left: -15px;
}
@keyframes topicshow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

/* 举报弹框内容 */
.report-info-container{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.report-info-container>.head{
  width: 100%;
  border-bottom: 1px rgb(220, 220, 220) solid;
  padding: 0 15px;
  box-sizing: border-box;
}
.report-info-container>.head>p{
  border-left: 5px rgb(255, 80, 80) solid;
  font-size: 14px;
  font-weight: 600;
  padding: 0 10px;
}
.report-info-container>.body{
  box-sizing: border-box;
  padding: 15px 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.report-info-container>.body>div:first-child{
  box-sizing: border-box;
  width: calc(100% - 15px);
  margin: 15px 0;
}
.report-info-container>.body>textarea{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: none;
  outline: none;
  resize: none;
  border: 1px rgb(220, 220, 220) solid;
  margin: 0 auto;
  width: calc(100% - 15px);
  height: 100px;
  border-radius: 4px;
  background-color: rgba(255, 241, 241, 0.34);
  color: rgb(86, 86, 86);
  font-size: 12px;
  padding: 15px;
  box-sizing: border-box;
}
.report-info-container>.foot{
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 15px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}.report-info-container>.foot>button{
  border-radius: 2px;
  margin-left: 15px;
  border: none;
  outline: none;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}
.report-info-container>.foot>button:nth-child(1){
  color: rgb(91, 91, 91);
  background-color: transparent;
  border: 1px rgb(220, 220, 220) solid;
  transition: all 0.2s;
}
.report-info-container>.foot>button:nth-child(2){
  background-color: rgb(255, 80, 80);
  border: 1px rgb(255, 80, 80) solid;
  color: white;
  transition: all 0.2s;
}
.report-info-container>.foot>button:nth-child(1):hover{
  background-color: rgb(220, 220, 220);
  border: 1px rgb(220, 220, 220) solid;
}
.report-info-container>.foot>button:nth-child(2):hover{
  background-color: rgb(211, 59, 59);
  border: 1px rgb(211, 59, 59) solid;
}

</style>